<template>
  <div>
    <!-- 管理已选课程按钮 -->
    <div class="button-container">
      <el-button class="btn_add" type="primary" @click="manageSelectedCourse" size="middle" icon="el-icon-plus">
        管理已选课程
      </el-button>
    </div>

    <!-- 课程表格 -->
    <el-card class="order-list">
      <el-table
        :data="tableData"
        border
        class="order-table"
        style="width: 100%; font-size: 16px"
        stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#333',
          fontWeight: 'bold',
          textAlign: 'center'
        }"
        :cell-style="{ textAlign: 'center' }"
      >
        <!-- 表格列定义 -->
        <el-table-column prop="id" label="课程编号" width="150px" />
        <el-table-column prop="name" label="课程名称" width="150px" />
        <el-table-column prop="teacher" label="教师名称" width="150px" />
        <el-table-column prop="size" label="教室容量" width="150px" />
        <el-table-column prop="courseNum" label="当前选课人数" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.courseNum != null ? scope.row.courseNum : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleSelectCourse(scope.$index, scope.row)"
              style="margin: auto 0; width: 150px; height: 40px; font-size: 15px"
            >
              选择这门课程
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="pageSizes"
          :page-size="courseDTO.pageSize"
          :current-page="courseDTO.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
        <el-button size="small" type="primary" @click="toPage" style="margin-left: 10px">
          跳转
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { queryCourseByPage } from '@/api/course'
import { studentSelectCourse } from '@/api/course/currentSelCourse'

export default {
  name: 'StudentSelCourse',
  data() {
    return {
      tableData: [],
      courseDTO: {
        pageNum: 1,
        pageSize: 3,
        id: null,
        name: null,
        teacher: null
      },
      stuSelCourse:{cid:''},
      total: 0,
      pageSizes: [3, 5, 10, 20]
    }
  },
  methods: {
    findAll() {
      queryCourseByPage(this.courseDTO)
        .then(res => {
          this.tableData = res.data.dataList
          this.total = res.data.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange(size) {
      this.courseDTO.pageSize = size
      this.findAll()
    },
    handleCurrentChange(currentPage) {
      this.courseDTO.pageNum = currentPage
      this.findAll()
    },
    toPage() {
      this.findAll()
    },
    // 管理已选课程
    manageSelectedCourse(){
      this.$router.push({
        path: '/studentSelCourse/module/currentSelectedCourse',
      })
    },
    // 选择这门课
    handleSelectCourse(index, row) {
      this.stuSelCourse.cid = row.id.toString()
       studentSelectCourse(this.stuSelCourse).then(ret => {
         if (ret.code === 200){
           // 给出提示信息，选课成功
           this.$message({
             type: 'success',
             message: '选课成功！',
             duration: 1000
           })

         }
       }).catch(err => {
         // 给出提示信息，选课失败
         this.$message({
           message: "选课失败",
           type: "error",
         });
       })
    }
  },
  created() {
    this.findAll()
  }
}
</script>

<style scoped>
/* 表头样式 */
.el-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* 单元格样式 */
.el-table td {
  text-align: center;
  padding: 10px 0;
  border-color: #ebeef5;
}

/* 分页容器改为靠右显示 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-right: 20px;
}

/* 管理按钮容器 */
.button-container {
  display: flex;
  margin-top: 30px;
  margin-left: 30px;
  width: 100px;
  background-color: #f5f7fa;
}

/* 管理按钮样式 */
.button-container .btn_add {
  margin-left: auto;
  text-align: center;
  font-size: 16px;
  width: 170px;
  border-top-left-radius: 6px;
}

/* 卡片容器 */
.order-list {
  padding: 20px;
}

/* 表格 */
.order-table {
  margin-top: 20px;
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0px; /* 原来是10px，可以试试0或更小 */
  padding-right: 20px;
}

</style>
